<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        v-permission="'monitor:operlog:query'"
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        row-key="infoId"
        :params="params"
        :columns="tableColumns"
        :http="{
          list: getListData,
          del: delLoginlog,
          empty: cleanLoginlog,
          exported: logininfor,
          batchDel: delLoginlog,
        }"
        :http-permission="{
          del: 'monitor:operlog:remove',
          empty: 'monitor:operlog:empty',
          exported: 'monitor:operlog:export',
        }"
      ></xTable>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { addDateRange } from '@/utils/index';
  import {
    getListData,
    delLoginlog,
    cleanLoginlog,
  } from '@/api/system/logininfor';
  import { logininfor } from '@/api/exportFile';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';

  // 定义查询字段
  const searchFileds: Array<any> = reactive([
    {
      span: 5,
      field: 'ipaddr',
      placeholder: '请输入登录地址',
      label: '登录地址',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'userName',
      placeholder: '请输入用户名称',
      label: '用户名称',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'status',
      placeholder: '请选择登录状态',
      label: '登录状态',
      initValue: '',
      tag: 'a-select',
      attrs: {
        options: [
          { value: '1', label: '成功' },
          { value: '2', label: '失败' },
        ],
      },
    },
    {
      span: 5,
      field: 'dateRange',
      label: '登录时间',
      tag: 'a-range-picker',
      initValue: [],
    },
  ]);
  // 定义表格字段
  const tableColumns: Array<TableColumnData> = reactive([
    {
      dataIndex: 'infoId',
      title: '访问编号',
    },
    {
      dataIndex: 'userName',
      title: '用户名称',
    },
    {
      dataIndex: 'ipaddr',
      title: '登录地址',
    },
    {
      dataIndex: 'loginLocation',
      title: '登录地点',
    },
    {
      dataIndex: 'browser',
      title: '浏览器',
    },
    {
      dataIndex: 'os',
      title: '操作系统',
    },
    {
      dataIndex: 'status',
      title: '登录状态',
    },
    {
      dataIndex: 'msg',
      title: '操作信息',
    },
    {
      dataIndex: 'loginTime',
      title: '登录日期',
    },
  ]);

  const refresh = ref(true);
  // 定义表格查询参数
  const params = ref({
    dateRange: [],
  });
  // 定义搜索方法
  const search = (data: any) => {
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };
</script>

<script lang="ts">
  export default {
    name: 'Role',
  };
</script>

<style scoped lang="less">
  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    .item {
      margin-left: 8px;
    }
  }
  .container {
    // padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
